CSS

font-size

Дальше мы начинаем работать с текстом, поэтому я для начала вставлю в нашу страничку lorem ipsum. Я надеюсь, что вы помните, как его найти, но, если не помните, давайте повторюсь. Для этого в Google вводите «lorem ipsum» и заходите по первой ссылочке.



Нажимаете "сгенерировать" и копируете какой-нибудь абзац, этого будет достаточно.



И в «box» вставляем этот текст. 

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida nulla urna, ac congue tortor dictum porttitor. Sed et leo augue. Nam ac vestibulum erat, et condimentum nibh. Pellentesque et tellus a orci porttitor ultrices ac at mi. Donec scelerisque eros nec aliquam sollicitudin. Etiam convallis eros eget sapien dapibus hendrerit. Vestibulum tincidunt, magna nec aliquet hendrerit, velit elit laoreet nisi, non dapibus nunc purus sit amet est. Sed eget elementum risus. Nunc dignissim aliquet ultrices. Vestibulum ut rhoncus sapien. Fusce id ultricies ipsum, sit amet scelerisque magna. Praesent rhoncus accumsan neque, eu ultricies massa luctus et. In cursus, leo vitae varius laoreet, dui velit volutpat enim, id convallis ex ipsum efficitur ipsum.
</div>

Итак, первое свойство для работы с текстом, которое мы изучим, – это «font-size». Свойство, которое позволяет изменять размер нашего шрифта.

.box{
  font-size:40px;
}

Размер можно задавать не только в пикселях, но мы остановимся сейчас только на em-ах и пикселях. Всё остальное вам в принципе не нужно. 

Давайте ещё немножечко поговорим про пиксели. Во-первых, стандартный размер шрифта – 16px. То есть, если вы «font-size» не задали, то у вас на странице будет 16-пиксельный размер, чтобы вы сразу же понимали, что, если вам нужно задать шрифт размером 16px, то можете ничего не задавать.

Я в основном использую минимум 12px, 14px, если нужно чуть-чуть уменьшить, 18 px, если нужно чуть увеличить, 20px, 30px, 40px – заголовки, ну, и 50px, если нужен какой-то очень большой заголовок, просто огроменный. Остальные размеры я использую по мере какой-то очень важной надобности. По факту: 12, 14, 16, 18, 20, 30, 40, на крайняк 50 пикселей. Можете та же использовать, если хотите.

С пикселями всё довольно-таки просто, теперь поехали к em-ами. Em – относительная величина, то есть, если вы задаёте размер 2em, то это есть по формуле 2*16,то есть, 32px.

Для чего это надо? Для того, чтобы можно было одноразово изменить весь размер текста на странице, то есть один какой-то параметр, и изменятся все параметры. Давайте для примера, для «body» мы зададим «font-size: 20px», то есть 20px это будет стандартный размер, то есть изначально стандартный размер 16px, теперь мы для «body», то есть для всей абсолютно страницы, задаём 20, и тогда главный шрифт будет размером 20px. Относительно умножаем на 2, получаем 40, и, вот, размер 40px.

К примеру, у вас будет на странице очень много em-ов и вам нужно шрифт всего сайта увеличить чуть-чуть на пару пикселей. То вы будете все пиксели прописывать, изменять с 20 на 22 пикселя, а так вы просто берёте и «font-size» прописываете 18px. И, вот, с 16 до 18 увеличивается и весь сайт увеличивается.

Для чего это ещё нужно? А по большей части ещё для мобильных устройств. Там из-за того, что сайт ужимается до размера мобилки и меняется вообще пиксельность местами, то размер шрифта в пикселях может прочитаться немножечко иначе. Иногда, когда вы прописываете шрифты в пикселях и открываете сайт на мобильных устройствах, то некоторые шрифты могут увеличиться или уменьшиться относительно того, как они должны выглядеть. Это всё из-за того, что пиксели. Поэтому, если вы делаете сайты для мобильных устройств, то лучше делать em-ы, и тогда на мобилке всё будет выглядеть так, как должно выглядеть в плане пропорций шрифтов относительно самого сайта. 

<!-- Тут я упущу дальнейшее описание. Лучше посмотрите в видео. Очень сложно эту тему описать текстом))) -->

Надеюсь, что было не очень сложно, поэтому, если вдруг запутались, что-то непонятно с em-ами, лучше сейчас сядьте и потыкайте, попрописывайте, повзаимодействуйте с ними, чтобы в голове уложилось и было более понятно, как это всё работает. На самом деле, всё очень просто. Поехали дальше.